<!--
  - 蜂巢1.5版新增
  - -->
<div class="bg-white bread-crumb">
  <ul class="breadcrumb b-a m-b-n-xs lter b-b wrapper-md">
    <li><a ui-sref="main.tpl.homePage"><i class="fa fa-home"></i> 首页</a></li>
    <li><a ui-sref="main.toolChest.loadPage.list">H5落地页</a></li>
    <li><a ui-sref="main.toolChest.loadPage.model">模板管理</a></li>
    <li class="active" ng-bind="title"></li>
  </ul>
</div>

  <div class="content">
      <div class="content-body">
        <!--头部title-->
        <!--<div class="content-title">
          <span class="mediaTitle">工具箱</span>
          <em class="font16 yellowTex">></em>
          <span class='mediaTitle'><a href="#/ladingPage">H5落地页</a></span>
          <em class="font16 yellowTex">></em>
          <span class='nextTitle' ng-show="!changeEditor">新增</span>
          <span class='nextTitle' ng-show='changeEditor'>编辑</span>
        </div>-->
        <!-- 选择落地页模版 --><!--{{tabNum}}-->
        <div class="ladingPageModule MT40 clear">
          <!--<div class="moduleTitle">-->
            <!--<span>选择落地页模板</span>-->
            <!--<ul class="fr">-->
              <!--<li class="cursor" ng-class="{tabModule:tabIndex==undefined}" ng-click="swtchTab()">全部</li>-->
              <!--<li class="cursor" ng-class="{tabModule:tabIndex==$index}"  ng-repeat="item in tabNum track by $index" ng-click="swtchTab($index,item)">{{item.lbbqName}}</li>-->
            <!--</ul>-->
          <!--</div>-->
          <!--<div class="moduleContent MT20 clear">-->
            <!--<div class="outHide" id='cutter'>-->
              <!--<span href="" class="leftBtn cursor" ng-click='toLeft()'><img src="./res/img/leftPage.png" alt=""></span>-->
              <!--<div class="slideModule">-->
                <!--<ul class="MT30" ng-style="leftNum" id="swiperUl">-->
                  <!--<li ng-repeat="item in picModules track by $index">-->
                    <!--<img src="" alt="">-->
                    <!--<p class="MT10">{{item.loadPageName}}</p>-->
                  <!--</li>-->
                <!--</ul>-->
              <!--</div>-->
              <!--<span style="z-index:1111;" class="rightBtn cursor" ng-click="toRight()"><img src="./res/img/rightPage.png" alt=""></span>-->
            <!--</div>-->
          <!--</div>-->
          <!-- 落地页名称 -->
          <div class="fl MT40 ladingName">
            <div class="warp">
              <p class="MB18 font16">公司名称</p>
              <label class="form-control" disabled="disabled" style="color: #333">上海联璧电子科技有限公司</label>
            </div>
            <div class="warp">
              <p class="MB18 font16">分类标签</p>
              <!--<my-select dataout="$parent.searchFlowType" datain="{{$parent.flowType}}" style="width:410px;;" defaultname="{{$parent.lbbqName}}" defaultid="$parent.loadPageType">-->
                <!--<input type='text' class='selectNormal' placeholder="流量类型" class="mam txt-normal" readonly style="padding-left:10px">-->
                <!--&lt;!&ndash;<i class='iconfont'>&#xe600;</i>&ndash;&gt;-->
                <!--<ul class='optionWrap'>-->
                  <!--<my-option ng-repeat='item in flowType' class='select-normal' value="item.loadPageType" text='{{item.lbbqName}}'>{{item.lbbqName}}</my-option>-->
                <!--</ul>-->
              <!--</my-select>-->
              <select name="" id="_tag" style="width:410px;" ng-model="tag" class="form-control" >
                <option value="{{item.loadPageType}}" ng-repeat='item in flowType'>{{item.lbbqName}}</option>
              </select>
              <!--<input type="text" placeholder="小于12个字" maxlength="12" ng-model="pageDetail.loadPageName">-->
            </div>
            <div class="warp">
              <p class="MB18 font16"><span class="redTex">*</span>封面</p>
              <div class="inputWrap">
                <div class="previewMain clear">
                  <div class="previewWrap1 fl">
                    <div up-load multi="1" draggable="false" data="logoImg" size="2000" class="previewMain">
                      <div class="upLoadImgWrap">
                        <div class="preViewImgWrap1 fl" ng-repeat="preImg in logoImg">
                          <div class="preViewImg">
                            <div class="picItem">
                              <div class="mask PVmask">
                                <span class="reUpLoad" index="{{$index}}">删除</span>
                              </div>
                              <div>
                                <img ng-src="{{preImg.src[0]}}" onload="if(this.width>=this.height){this.style.width='100%'}else{this.style.height='100%'}">
                              </div>
                              <!--<span class="deleBtn"  index="{{$index}}">删除</span>-->
                            </div>
                          </div>
                        </div>
                        <div ng-show="logoImg.length<1" class="clear">
                          <label class="upLoadImg fl" for="PPuploadFileLogo" change="PPuploadSuccess()">
                            <!-- <img src="../../res/img/addPic.png" alt=""> -->
                            <input type="file" accept="image/png,image/jpg" id="PPuploadFileLogo" style="opacity: 0"/>
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="warp">
              <p class="MB18 font16"><span class="redTex">*</span>落地页名称</p>
              <input type="text" placeholder="小于12个字" maxlength="12" ng-model="pageDetail.loadPageName" class="form-control">
            </div>
            <div class="warp">
              <p class="MB10 font16">落地页Keyword</p>
              <input type="text" placeholder="小于30个字" maxlength="30" ng-model="pageDetail.keyword" class="form-control">
            </div>
            <div class="warp">
              <p class="MB10 font16">落地页Descripion</p>
              <textarea name="" id="" cols="30" rows="10"  placeholder="小于80个字" maxlength="80" ng-model="pageDetail.description" class="form-control"></textarea>
            </div>
            <div class="warp">
              <p class="MB10 font16">落地页统计代码</p>
              <textarea name="" id="" cols="30" rows="10" style="height:310px;" ng-model="pageDetail.scriptContent" class="form-control"></textarea>
            </div>
            <div class="ladingBtn">
              <button ng-click="addSave()">保存</button>
            </div>
          </div>
          <!-- 落地页预览 -->
          <div class="fr MT40 ladingShow">
            <div class="showTitle">
              <span class="font16">自定义页面</span>
              <button class="fr" ng-click="showAddmodules=true">添加模块</button>
            </div>
            <div class="pageModule">
              <div ng-repeat="pageItem in allList track by $index">
                <!-- 轮播图 ng-repeat="pageItem in allInformationList track by $index"-->
                <div class="pagePic" ng-show="pageItem.moduleType==1">
                  <div class="operat">
                    <span class="MR10 cursor" ng-click="editorPic(pageItem,$index,1)"><img src="./res/img/edPage.png" alt=""></span>
                    <span class="cursor" ng-click="deleteForm($index)"><img src="./res/img/deletePage.png" alt=""></span>
                  </div>
                  <!--pageItem.bannerList[0].bannerImg[0] 加数组新增可以，不加修改可以-->
                  <img class="bannerPic" ng-src="{{pageItem.bannerList[0].bannerImg}}" alt="">
                  <div class="dots">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                </div>
                <!-- html -->
                <div class="pageText" ng-show="pageItem.moduleType==2">
                  <div class="operat" style="top:5px">
                    <span class="MR10 cursor" ng-click="editorText(pageItem,$index,1)"><img src="./res/img/edPage.png" alt=""></span>
                    <span class="cursor" ng-click="deleteForm($index)"><img src="./res/img/deletePage.png" alt=""></span>
                  </div>
                  <div ng-bind-html="pageItem.pageLoadContent | to_trusted" class="PL20 PR20 PT30 PB20 " style="word-wrap:break-word">
                  </div>
                </div>
                <!-- form表单 -->
                <div class="pageForm PLR20 outHide" ng-show="pageItem.moduleType==3">
                  <div class="operat">
                    <span class="MR5 cursor" ng-click="copyForm(pageItem,$index)"><img src="./res/img/copeData.png" alt=""></span>
                    <span class="cursor" ng-click="deleteForm($index)"><img src="./res/img/deletePage.png" alt=""></span>
                  </div>
                  <div>
                    <div ng-repeat="formItem in pageItem.collectList track by $index">
                      <div class="pageInput MT20" ng-show="formItem.selectType==0">
                        <label for=""><span class="redTex" ng-show="formItem.needCheck=='Y'">*</span>{{formItem.fieldName}}</label>
                        <input type="text" readonly>
                      </div>
                      <div class="pageSelect MT20" ng-show="formItem.selectType==1">
                        <label for=""><span class="redTex" ng-show="formItem.needCheck=='Y'">*</span>{{formItem.fieldName}}</label>
                        <my-select class="MR22" dataout="$parent.searchFlowType" datain="{{$parent.flowType}}" disabled="disabled" defaultname="{{$parent.defaultName}}" readonly defaultid="$parent.defaultPageSize">
                          <input type='text' placeholder="请选择" class=" txt-normal selectNormal" readonly>
                          <!-- <i class='iconfont'>&#xe600;</i> -->
                          <ul class='optionWrap'>
                              <my-option ng-repeat='item in flowType' class='select-normal' value="item.id" text='{{item.value}}'>{{item.value}}</my-option>
                          </ul>
                        </my-select>
                      </div>
                      <div class="pageCheckBox MT20" ng-show="formItem.selectType==2">
                        <label for=""><span class="redTex" ng-show="formItem.needCheck=='Y'">*</span>{{formItem.fieldName}}</label>
                        <div class="fCheckBox" ng-repeat="checkItem in formItem.selectDetai track by $index">
                          <input type="checkbox" id="selectAll" ng-model="selectAll" readonly disabled="disabled">
                          <label class="" for="selectAll">
                            {{checkItem}}
                          </label>
                        </div>
                      </div>
                    </div> 
                    <div class="showBtn MTB20">
                      <button>提交</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 弹出层 -->
      <!-- 添加自定义模块 -->
      <div class="cover" ng-show="showAddmodules">
        <add-modules></add-modules>
      </div>
      <!-- 编辑器 -->
      <div class="Layer cover" ng-if="showEditorLayer">
          <editor-edit class="moduleBox" is-show-editor-layer="$parent.showEditorLayer" editor="$parent.editor" is-show-list2="isShowList2()"></editor-edit>
      </div>
      <!-- 轮播图 -->
      <div class="Layer cover" ng-if="showSwiperEditLayer">
          <swiper-edit class="moduleBox" is-show-swiper-edit-layer="$parent.showSwiperEditLayer" swiper-data="$parent.swiperData" is-show-list1="isShowList1()"></swiper-edit>
      </div>
      <!-- 信息收集器 -->
      <div class="Layer cover" ng-if="showInforLayer">
        <information-modules ng-class="{moduleBox:showInforLayer}" 
        is-show-infor-layer="$parent.showInforLayer" is-copy-infor="$parent.copyInfor" is-show-list3="isShowList3(a)"></information-modules>
      </div>
  </div>
  
  <style>
    .content{
      background: #fff;
      margin:10px ;
      padding: 20px;
      border-radius: 5px;
    }
    .content-title{
      width: 100%;
    }
    .content-body{
      width: 100%;
      min-width: 800px;
    }
    html,body{
      min-width: 800px;
    }

    .ladingPageModule{
      width: 100%;
      min-width: 800px;
      max-width: 1200px;
    }
    .moduleTitle{
      font-size: 16px;
    }
    .moduleTitle li{
      float: left;
      position: relative;
      margin-left: 10px;
      padding-bottom: 5px;
    }
    .tabModule::after{
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      border: 1px solid red;
      width: 100%;
    }

    .moduleContent{
      height: 234px;
      width: 100%;
      border: 1px solid #d8d8d8;
      position: relative;
      overflow: hidden;
      padding: 0 49px;
    }
    .slideModule{
      /* width: 1110px; */
      height: 234px;
      overflow: hidden;
      /* margin: 0 50px; */
    }
    .slideModule ul{
      /* width: 14000px; */
      height: 180px;
      position: relative;
      white-space: nowrap
    }
    .slideModule li{
      width: 120px;
      height: 180px;
      margin-right: 20px;
      display: inline-block
    }
    .slideModule li img{
      width: 120px;
      height: 150px;
      border: 1px solid #d8d8d8;
      display: inline-block;
    }
    .leftBtn{
      position: absolute;
      left: 20px;
      top: 100px;
    }
    .rightBtn{
      position: absolute;
      right: 20px;
      top: 100px;
    }


    .ladingName{
      width: 40%;
      /* height: 500px; */
    }
    .warp{
      margin-bottom: 30px
    }
    .warp input{
      width: 100%;
      height: 42px;
    }
    .warp textarea{
      width: 100%;
      height: 150px;
    }
    .ladingBtn button{
      width: 100px;
      height: 42px;
      border-radius: 4px;
      border: 1px solid #ffb135;
      background: #ffb135;
      color: #fff;
      font-size: 16px;
    }


    .ladingShow{
      width: 50%;
    }
    .showTitle{
      height: 32px;
    }
    .showTitle button{
      width: 90px;
      height: 32px;
      border: 1px solid #ff9503;
      color: #ff9503;
      font-size: 14px;
      border-radius: 6px;
      margin-bottom: 13px;
    }


    .pageModule{
      width: 100%;
      height: 750px;
      border: 1px solid #d8d8d8;
      margin-top: 4px;
      /* padding: 20px 20px; */
      overflow-y: auto; 
    }
    .pagePic,.pageText,.pageForm{
      width: 100%;
      /* height: 320px; */
      border-bottom: 1px dashed #d8d8d8;
      position: relative;
    }
    .pagePic{
      height: 320px;
    }
    .pagePic .bannerPic{
      width: 100%;
      height: 100%;
      display: inline-block;
    }
    .pageInput input,.pageSelect input{
      width: 330px;
      height: 34px;
    }
    .pageInput label,.pageCheckBox label,.pageSelect label{
      width: 100px;
    }
    .showBtn button{
      width: 100%;
      height: 34px;
      background: #ffb135;
      color: #fff;
      border: 1px solid #ffb135;
      border-radius: 4px;
    }
    .operat{
      position: absolute;
      right: 5px;
      top: 5px;
      /* width: 80px; */
      height: 20px;
    }
    .operat img{
      width:auto;
      /*height:100%;*/
    }
    .dots{
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translate(-50%,-50%);
      /* width: 200px; */
      height: 20px;
      text-align: center;
    }
    .dots span{
      display: inline-block;
      width: 15px;
      height: 15px;
      border: 1px solid #d8d8d8;
      border-radius: 50%;
      background: #fff;
      margin-right: 10px
    }

    .mediaTitle{
      font-size: 16px;
      color: #ffb135;
      padding: 15px 0 15px 0px;
      /*letter-spacing: 1;*/
      position: relative;
      display: inline-block;
    }
    .mediaTitle a{
      color: #ffb135;
    }
    .nextTitle{
      font-size: 16px;
      color: #393d40;
    }


     .preViewImgWrap {
      margin: 20px;
    }

     .preViewImg {
      width: 100%;
      height: 140px;
      overflow: hidden;
    }

    .preViewImg .picItem {
      height: 100%;
      position: relative;
    }

    .preViewImg .mask+div {
      height: 100%;
      width: 100%;
    }

    .picItem:hover .mask {
      height: 100%;
    }

    .preViewImgWrap1 {
      margin: 20px;
    }

    .preViewImg1 {
      width: 140px;
      height: 140px;
      overflow: hidden;
    }

    .previewWrap1 {
      width: 370px;
      /*height: 168px;*/
      padding-bottom: 10px;
      border: 1px solid #d3d3d3;
    }

    .previewWrap1 .text {
      padding: 13px 98px;
      text-indent: 45px;
    }

    .previewWrap1 .upLoadImg {
      margin: 15px 0 0 110px;
      width: 140px;
      height: 140px;
      border: 1px dashed #d6d5d5;
      padding-top: 38px;
      /*margin: 15px 0 0 15px;*/
      display: inline-block;
      background: #fff url(./res/img/addPic.png) no-repeat center;
      cursor: pointer;
    }

    /*.preViewImgWrap1 {*/
      /*margin: 50px 0px 0 110px;*/
    /*}*/


     .previewWrap {
      width: 700px;
      /*height: 168px;*/
      padding-bottom: 10px;
      border: 1px solid #d3d3d3;
    }

     .previewWrap .text {
      padding: 13px 50px;
      margin-top: 50px;
    }

     .previewWrap .upLoadImg {
      margin: 15px 0 0 30px;
    }

     form {
      margin-top: 40px;
    }

     .upLoadImgWrap {
      /*width:500px;*/
    }

     .preViewImgWrap {
      margin: 20px;
    }

    .preViewImg1 .picItem {
      height: 100%;
      position: relative;
    }

    .preViewImg1 .mask+div {
      height: 100%;
      width: 100%;
    }

    .picItem:hover .mask {
      height: 100%;
    }

    .preViewImg1 {
      width: 140px;
      height: 140px;
      overflow: hidden;
    }





    .tabBtn {
      padding: 20px 0 0 0px;
      font-size: 18px;
    }

    .tabBtn span {
      padding: 4px 0;
      margin: 0 10px;
    }

    .tabBtn span.active {
      color: #F2980F;
      border-bottom: 4px solid #F2980F;
    }

    .adQualification {
      padding: 10px;
      background: #FFF;
    ;
      color: #FFB135;
      margin: 40px 0 0 0px;
      border: 1px solid #FFB135;
    ;
    }

    .button span {
      width: 150px;
      height: 52px;
      line-height: 52px;
      border-radius: 26px;
      background: #ffb135;
      text-align: center;
      color: #fff;
      cursor: pointer;
      border: 0;
      outline: 0;
      margin: 0 10px;
      float: left;
    }

    .addNewBrand {
      width: 600px;
      background: #fff;
      border-radius: 5px;
    }

    .addNewBrand .preViewImg {
      width: 140px;
      height: 140px;
      overflow: hidden;
    }

    .addNewBrand .previewWrap .text {
      padding: 13px 10px;
      margin-top: 20px;
    }

    .addNewBrand .previewWrap .upLoadImg {
      margin: 30px 0 0 0px;
    }

    .addNewBrand .preViewImgWrap {
      margin: 0px;
    }

    .closeBtn {
      right: 16px;
      top: 10px;
      color: #FFB135;
    }

    .deleBtn{
      cursor: pointer;
      border: 1px solid #3f3f3f;
      width: 50px;
      height: 30px;
      line-height: 30px;
      display: inline-block;
      text-align: center;
      border-radius: 3px;
      margin:0 auto;
    }
    .PVmask{
      position: absolute;
      overflow: hidden;
      height: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      transition: all 0.3s;
    }
    .PVmask:hover{
      height:100%;
    }
    .PVmask span{
      color:#fff;
      width:50px;
      height:30px;
      background-color: #00b7ee;
      text-align: center;
      line-height: 30px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    .content{
      background: #dedede;
      margin:0;
    }
    .app-content-body{
      margin-top:70px;
    }

    .MR22 input{
      background-image: url(./res/img/icon-down.png);
      background-position: right center;
      background-repeat: no-repeat;
    }
  </style>